<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <include file="Public/meta" />
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="css/animsition.min.css" />
    <link rel="stylesheet" href="css/drop-down.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/system.css" />
    <style type="text/css">
        .main-content{
            height: auto !important;
        }
    </style>
</head>
<body>
    
    <div class="info-center">
        <div class="content-list">
            <div class="row">
                <div class="col-md-3">
                    <div class="content">
                        <div class="w30 left-icon pull-left">
                            <span class="glyphicon glyphicon-bell blue"></span>
                        </div>
                        <div class="w70 right-title pull-right">
                            <div class="title-content">
                                <p>待处理订单</p>
                                <h3 class="number">{$count.handle_order}</h3>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="content">
                        <div class="w30 left-icon pull-left">
                            <span class="glyphicon glyphicon-gift violet"></span>
                        </div>
                        <div class="w70 right-title pull-right">
                            <div class="title-content">
                                <p>商品数量</p>
                                <h3 class="number">{$count.goods}</h3>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="content">
                        <div class="w30 left-icon pull-left">
                            <span class="glyphicon glyphicon-file orange"></span>
                        </div>
                        <div class="w70 right-title pull-right">
                            <div class="title-content">
                                <p>文章数量</p>
                                <h3 class="number">{$count.article}</h3>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="content">
                        <div class="w30 left-icon pull-left">
                            <span class="glyphicon glyphicon-user green"></span>
                        </div>
                        <div class="w70 right-title pull-right">
                            <div class="title-content">
                                <p>会员总数</p>
                                <h3 class="number">{$count.users}</h3>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="row newslist" style="margin-top:20px;">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            今日统计
                        </div>     
                        <div class="panel-body">
                            <div class="w25 pull-left">
                                新增订单：{$count.new_order}
                            </div>
                            <div class="w25 pull-left">
                                今日访问：{$count.today_login}
                            </div>
                            <div class="w25 pull-left">
                                新增会员：{$count.new_users}
                            </div>
                            <div class="w25 pull-left">
                                待审评论：{$count.comment}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图标信息 start-->
            <div class="data_wrap" class="col-md-12" style="background: #efeff5;box-sizing: border-box;margin: 0 auto; padding: 10px; overflow: hidden;">
            <div class="animsition" class="col-md-12">
                <div class="col-md-12" style="background: white; solid #efeff5;  overflow: hidden;">
                    <p id="my_date_set1">日期</p>
                    <p id="my_date_set2">日期</p>
                    <div id="main" class="col-md-8" style="height:350px;  float: left;"></div>
                    <div id="main2" class="col-md-4" style="height:350px; float: left;"></div>
                    <div id="main3" class="col-md-12" style="height:350px;  clear: both; border-top: 10px solid #efeff5;"></div>
                    <div id="main4" class="col-md-8" style="height:350px;  float: left; border-top: 10px solid #efeff5;"></div>
                    <div id="main5" class="col-md-4" style="height:350px;  float: left;border-top: 10px solid #efeff5;"></div>
                </div>
                </div>
            </div>
        </div>
        
        
            <!-- 图标信息 end-->
            <!-- <div class="row newslist">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            系统信息
                        </div>     
                        <div class="panel-body">
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                服务器操作系统：{$sys_info.os}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                服务器域名/IP：{$sys_info.domain} [ {$sys_info.ip} ]
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                服务器环境：{$sys_info.web_server}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                PHP 版本：{$sys_info.phpv}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                Mysql 版本：{$sys_info.mysql_version}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                GD 版本：{$sys_info.gdinfo}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                文件上传限制：{$sys_info.fileupload}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                最大占用内存：{$sys_info.memory_limit}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                最大执行时间：{$sys_info.max_ex_time}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                安全模式：{$sys_info.safe_mode}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                Zlib支持：{$sys_info.zlib}
                            </div>
                            <div class="w20 pull-left" style="margin-bottom:15px">
                                Curl支持：{$sys_info.curl}
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>          
            
    <script type="text/javascript" src="__ADMIN_JS__/common.js"></script>
    <script type="text/javascript">

    $(function(){

        // 动态调整iframe的高度以适应不同高度的显示器
        $('.info-center').height($(window).height()-50);

    })
    </script>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
    <script src="js/select-widget-min.js"></script>
    <script src="js/jquery.animsition.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.5.3/echarts.min.js"></script>
    <script src="js/macarons .js"></script>
    <script src="js/common1.js"></script>
     <script>
            $(document).ready(function() {
              //初始化切换
              $(".animsition").animsition({
              
                inClass               :   'fade-in-right',
                outClass              :   'fade-out',
                inDuration            :    1500,
                outDuration           :    800,
                linkElement           :   '.animsition-link',
                // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
                loading               :    true,
                loadingParentElement  :   'body', //animsition wrapper element
                loadingClass          :   'animsition-loading',
                unSupportCss          : [ 'animation-duration',
                                          '-webkit-animation-duration',
                                          '-o-animation-duration'
                                        ],
                //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
                //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
                
                overlay               :   false,
                
                overlayClass          :   'animsition-overlay-slide',
                overlayParentElement  :   'body'
              });
              
               // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'),'macarons');
                var myChart2 = echarts.init(document.getElementById('main2'),'macarons');
                var myChart3 = echarts.init(document.getElementById('main3'),'macarons');
                var myChart4 = echarts.init(document.getElementById('main4'),'macarons');
                var myChart5 = echarts.init(document.getElementById('main5'),'macarons');
                // 指定图表的配置项和数据
                var date = ['2016/11/1','2016/11/2','2016/11/3','2016/11/4','2016/11/5','2016/11/6','2016/11/7','2016/11/8','2016/11/9','2016/11/10',
                '2016/11/11','2016/11/12','2016/11/13','2016/11/14','2016/11/15','2016/11/16','2016/11/17','2016/11/18'
                ,'2016/11/19','2016/11/20','2016/11/21','2016/11/22','2016/11/23','2016/11/24','2016/11/25','2016/11/26','2016/11/27'
                ,'2016/11/28','2016/11/29','2016/11/30'];
                
                
                function my_data(){
                    var data = [];
                    for( var i =0; i<30; i++){
                        data.push(Math.round(Math.random() * (500 - 100) + 100));
                    };
                    return data;
                }
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        /*formatter: function(data){
                            //console.log(data)
                             myChart.setOption({
                                title : {
                                    text: '会员数量' + data.value,
                                }
                            });
                            
                           return data.name + '</br>' + '新增数：' + data.value + '</br>';
                        }*/
                        
                    },
                    title: {
                        text: '订单数量：1000',
                        /*subtext: '昨日新增：',
                        subtextStyle: {
                            fontSize:14,
                            color : '#ff4a84'
                        }*/
                    },
                    
                    toolbox: {
                        show : true,
                         feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: true},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {}
                        }
                    },
                    calculable : true,
                    xAxis: {
                        type : 'category',
                        boundaryGap : false,
                        data : date
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 84,
                        end: 100
                    }, {
                        start: 84,
                        end: 100,
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name:'新增数',
                            type:'line',
                            smooth:true,
                            itemStyle: {
                                normal: {
                                    color: 'rgb(255, 70, 131)'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }])
                                }
                            },
                            data : my_data()
                        }
                    ]
                };

                var option2 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function(data){
                            //console.log(data)
                             myChart.setOption({
                                title : {
                                    text: '会员数量' + data.value,
                                }
                            });
                            return data.name + '</br>' + '人数：' + data.value + '</br>占比：' + data.percent + '%'+'</br>';
                        }
                    },
                    toolbox: {
                        show : true,
                         feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    legend: {
                        orient: 'horizontal', // 'vertical'
                        icon:'pie',
                       // orient: 'vertical',
                        x: 'right',
                        y: 'bottom',
                        selectedMode:true,
                        data:['准会员','普通会员','高级会员','VIP会员','超级VIP会员']
                    },
                    series: [
                        {
                            name:'各级别会员人数',
                            center:['50%','50%'],
                            type:'pie',
                            radius: ['50%', '65%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center',
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '20',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:335, name:'准会员'},
                                {value:310, name:'普通会员'},
                                {value:234, name:'高级会员'},
                                {value:135, name:'VIP会员'},
                                {value:1548, name:'超级VIP会员'}
                            ]
                        }
                    ]
                };
                var option3 = {
                    title : {
                        text: '商品数量'
                    },
                    tooltip : {
                        trigger: 'axis',
                        /* axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }*/
                    },
                    legend: {
                        data:['普通会员','高级会员','VIP会员','超级VIP会员']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : true,
                            data : date
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                     grid: {
                        left: '3%',
                        right: '4%',
                        containLabel: true
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 74,
                        end: 100,
                    }, {
                        start: 74,
                        end: 100,
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series : [
                        {
                            name:'普通会员',
                            type:'bar',
                            stack: '总量',
                            barMaxWidth : 30,
                            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:my_data()
                        },
                        {
                            name:'高级会员',
                            type:'bar',
                            stack: '总量',
                            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:my_data()
                        },
                        {
                            name:'VIP会员',
                            type:'bar',
                            stack: '总量',
                            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:my_data()
                        },
                        {
                            name:'超级VIP会员',
                            type:'bar',
                            stack: '总量',
                            //itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:my_data()
                        }
                    ]
                };
                var option4 = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    title: {
                        text: '会员数量',
                        /*subtext: '昨日新增：',
                        subtextStyle: {
                            fontSize:14,
                            color : '#ff4a84'
                        }*/
                    },
                    
                    toolbox: {
                        show : true,
                         feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    legend: {
                        data:['新会员','老会员','潜客']
                    },
                    calculable : true,
                    xAxis: {
                        type : 'category',
                        boundaryGap : false,
                        data : date
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 84,
                        end: 100
                    }, {
                        start: 84,
                        end: 100,
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name:'新会员',
                            type:'line',
                            smooth:false,
                            stack: '总量',
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:my_data()
                        },
                        {
                            name:'老会员',
                            type:'line',
                            stack: '总量',
                            smooth:true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:my_data()
                        },
                        {
                            name:'潜客',
                            type:'line',
                            stack: '总量',
                            smooth:true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data:my_data()
                        }
                    ]
                };

                var option5 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function(data){
                            //console.log(data)
                             myChart.setOption({
                                title : {
                                    text: '会员数量' + data.value,
                                }
                            });
                            return data.name + '</br>' + '人数：' + data.value + '</br>占比：' + data.percent + '%'+'</br>';
                        }
                    },
                    toolbox: {
                        show : true,
                         feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    legend: {
                        orient: 'horizontal', // 'vertical'
                        icon:'pie',
                       // orient: 'vertical',
                        x: 'right',
                        y: 'bottom',
                        selectedMode:true,
                        data:['新会员','老会员','潜客']
                    },
                    series: [
                        {
                            name:'各级别会员人数',
                            center:['50%','50%'],
                            type:'pie',
                            radius: ['50%', '65%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '20',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:335, name:'新会员'},
                                {value:310, name:'老会员'},
                                {value:210, name:'潜客'}
                            ]
                        }
                    ]
                };                    
                
                
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart2.setOption(option2);
                myChart3.setOption(option3);
                myChart4.setOption(option4);
                myChart5.setOption(option5);
                
                myChart.on('mousemove',function(params){ // 控制台打印数据的名称 
                    $('#my_date_set1').html(params.name);
                    myChart2.clear();
                    option2.series[0].data = [
                        {value:900, name:'准会员'},
                        {value:150, name:'普通会员'},
                        {value:150, name:'高级会员'},
                        {value:150, name:'VIP会员'},
                        {value:150, name:'超级VIP会员'}
                    ];
                    myChart2.setOption(option2,true);
                    /*myChart2.setOption({
                        series: [
                            {
                                data:[
                                    {value:100, name:'准会员'},
                                    {value:310, name:'普通会员'},
                                    {value:234, name:'高级会员'},
                                    {value:135, name:'VIP会员'},
                                    {value:params.value, name:'超级VIP会员'}
                                ]
                            }
                        ]
                    });*/
                });
                myChart4.on('mousemove',function(params){ // 控制台打印数据的名称 
                    $('#my_date_set2').html(params.name)
                    myChart5.setOption({
                        series: [
                            {
                                data:[
                                    {value:params.value, name:'新会员'},
                                    {value:310, name:'老会员'},
                                    {value:210, name:'潜客'}
                                ]
                            }
                        ]
                    });
                });
                
            });
        </script>
</body>
</html>
